<template>
  <div class="detail">
    <div class="breadcrumb-area">
      <div class="content">
        <div class="breadcrumb">
          <a href="/">首页</a>
          <a class="active">页面模版</a>
        </div>
        <div class="title">{{ data.title }}</div>
      </div>
    </div>
    <div class="product-desc">
      <div class="container-page">
        <Row type="flex" :gutter="30">
          <Col :span="16">
            <div class="left">
              <img
                @click="toDetail"
                :src="data.img"
                class="img"
                style="cursor: pointer"
              />
              <div class="btns">
                <a @click="toDetail" class="btn-large">在线Demo预览</a>
                <a @click="buy" class="btn-large" style="margin-left: 25px"
                  >立即获取源码</a
                >
              </div>
              <div class="desc">
                <div class="attribute">
                  <div class="title">概述</div>
                  <p>
                    响应式登录/注册/重置密码/验证等表单页面，请自行阅读代码完善逻辑及样式
                  </p>
                </div>
                <div class="attribute">
                  <div class="title">文件代码路径</div>
                  <p>src/views/materials/page/page4/Login3.vue</p>
                </div>
              </div>
            </div>
          </Col>
          <Col :span="8"
            ><div class="right">
              <div class="card-title">物料信息</div>
              <div class="infos">
                <div class="item">
                  <div class="key">发布时间：</div>
                  <div class="value">{{ data.createTime }}</div>
                </div>
                <div class="item">
                  <div class="key">更新时间：</div>
                  <div class="value">{{ data.updateTime }}</div>
                </div>
                <div class="item">
                  <div class="key">分类：</div>
                  <div class="value">{{ data.category }}</div>
                </div>
                <div class="item">
                  <div class="key">布局：</div>
                  <div class="value">响应式</div>
                </div>
                <div class="item">
                  <div class="key">浏览器：</div>
                  <div class="value">
                    >IE8, Edge, Firefox, Safari, Opera, Chrome5
                  </div>
                </div>
                <div class="item">
                  <div class="key">标签：</div>
                  <div class="value">
                    <a
                      v-for="(item, index) in tags"
                      :key="index"
                      @click="toSearch(item)"
                      >{{ item }}
                    </a>
                  </div>
                </div>
              </div>
            </div></Col
          >
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  name: "template",
  components: {},
  data() {
    return {
      data: {},
      tags: [],
    };
  },
  methods: {
    toSearch(v) {
      this.$router.push({
        name: "list",
        query: {
          key: v,
        },
      });
    },
    toDetail() {
      this.$router.push({
        name: this.data.detailRoute,
      });
      window.open(this.data.path);
    },
    buy() {
      window.open("http://xpay.exrick.cn/pay?xboot");
    },
  },
  mounted() {
    let data = Cookies.get("currData");
    if (!data) {
      this.$Message.error("读取数据失败");
      this.$router.push({
        path: "/",
      });
    }
    this.data = JSON.parse(data);
    this.tags = this.data.tag.split(",");
  },
};
</script>

<style scoped lang="less">
@import "@/views/detail/detail.less";
</style>
